<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>float</title>
 
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../reset.css"/>
<script type="text/javascript" src="Float.min.1.0.js"></script>
<style type="text/css">
    .close{ position: absolute; right: 0; cursor: pointer;background: #fff;}
</style>
<body>
<div style="width: 2230px;height: 1230px; background: #eeffff;"></div>

<script type="text/javascript">


    /**
     * .Float
     * @extends jquery.1.6.2
     * @fileOverview   浮动框
     * @author 2kid
     * @email 444212235@qq.com
     * @site 2kid.org
     * @version 1.0
     * @date 2011-08-18
     * Copyright (c) 2011-2012 2kid
     * @example
     *   $.Float();
     */


(function($){
    $.Float=function(options){
        var opt=$.extend(true,{},$.Float.settings,options),
            ofloat=new Float(opt);
            ofloat.init();
    };
    function Float(o){
        this.o=o;
        this.$float=$(this.o.tmplate.wrap);
        this.$close=$(this.o.tmplate.close);
        //
        this.timer=0;
        //方向
        this.dur={right:true,bottom:true};
    }
    Float.prototype={
        init:function(){

            this.$float.css(this.o.style).data({lastscroll:this.docscroll()});
            this.$float.append(this.$close);
            $('body').append(this.$float);
            this._bindevent();
            this.addcont(this.o.cont);
            this.move();

        },
        _bindevent:function(){
            var _this=this;
            this.$float.bind('mouseover',function(){
                _this.stopemove();
            });
            this.$float.bind('mouseout',function(){
                _this.move();
            });
            this.$close.bind('click',function(){
                _this.removemove();
            });
        },
        stopemove:function(){
            clearTimeout(this.timer);
        },
        removemove:function(){
            this.$float.remove();
        },
        addcont:function(cont){
            this.$float.append(cont);
        },
        move:function(){
            var _this=this,
                lastpos=this._getlastpos(),
                docscroll=this.docscroll(),
                winsize=this.winsize(),
                dur=this.dur;
            this.$float.data({lastscroll:this.docscroll()});

            this.timer=setTimeout(function(){

                //判断方向
                if(lastpos.top<=docscroll.t){
                    dur.bottom=true;
                }else if(lastpos.top>=docscroll.t+winsize.h-_this.$float.height()){
                    dur.bottom=false;
                }
                if(lastpos.left<=docscroll.l){
                    dur.right=true;
                }else if(lastpos.left>=docscroll.l+winsize.w-_this.$float.width() ){
                    dur.right=false;
                }
                dur.right?lastpos.left++:lastpos.left--;
                dur.bottom?lastpos.top++:lastpos.top--;
                 _this.$float.css({left: lastpos.left,top: lastpos.top});
                 _this.move();
            },this.o.speed);

        },

        _getlastpos:function(){
            var docscroll=this.docscroll();
             return {
                left:docscroll.l+parseFloat(this.$float.css('left'))-this.$float.data('lastscroll').l,
                top:docscroll.t+parseFloat(this.$float.css('top'))-this.$float.data('lastscroll').t
            }

        },
        docscroll:function(){
             return {
                l:$(document).scrollLeft(),
                t:$(document).scrollTop()
            }
        },
        docsize:function(){
            return{
                w:$(document).width(),
                h:$(document).height()
            };
        },
        winsize:function(){
            return {
                w:$(window).width(),
                h:$(window).height()
            }
        }
    };
    $.Float.settings={
        tmplate:{
            wrap:'<div></div>',
            close:'<div class="close">关闭</div>'
        },
        style:{
            width: 100,
            height: 100,
            position: 'absolute',
            left:0,
            top:0,
            background:'#ccc'
        },
        speed:10,
        cont:''
    }
})(jQuery);

$.Float({cont:'sdfk'});

</script>

<div>
    <div class="cont"></div>
    <div class="close"></div>
</div>
</body>
</html>


